<template>
    <div id="statics">
        <div style="background-color: white;width: 100%;">
            <div style="padding: 10px;width: 50%;display: flex;justify-content: space-between;align-items: center;">
                <div>
                    日志记录:
                    <el-select v-model="selectvalue" placeholder="请选择保留范围" style="width: 140px !important;">
                        <el-option v-for="item in selectList" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <el-button @click="f_del()" style="margin-left: 10px;" type="danger">删除</el-button>

                </div>
                <div>
                    <el-input v-model="search" style="width: 240px" placeholder="请输入区划名称或代码进行查询" clearable
                        :prefix-icon="Search" @clear="f_clear()" />
                    <el-button @click="f_search()" style="margin-left: 10px;" type="success">查询</el-button>
                </div>
            </div>
            <div style="padding: 10px;width: 50%;">
                <el-table :data="logList" border height="450">
                    <el-table-column type="index" label="序号" width="60" align="center" />
                    <el-table-column prop="name" label="区划名称" />
                    <el-table-column prop="code" label="区划代码" />
                    <el-table-column prop="login_time" label="登录时间" />
                    <el-table-column prop="ip" label="登录IP" />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'
import $sys from '../api/sys';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    getLoginLog();
})
const logList = ref([]);
const postobj = ref({
    pagenum: 1,
    pagesize: 999
})
const search = ref('')
const selectvalue = ref(0);
const selectList = ref([
    {
        value: 0,
        label: '保留当年'
    },
    {
        value: 1,
        label: '保留当月'
    },
    {
        value: 2,
        label: '全部删除'
    }
])
function f_clear(){
    postobj.value.name = '';
    getLoginLog();
}
function f_del() {
    let type = '';
    if (selectvalue.value == 0) {
        type = '保留当年';
    } else if (selectvalue.value == 1) {
        type = '保留当月';
    } else {
        type = '全部删除';
    }
    ElMessageBox.confirm(
        `此操作一经保存不可撤回,您确定${type}登录日志吗?`,
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.delLoginLog(selectvalue.value).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                })
                getLoginLog();
            } else {
                ElMessage({
                    message: `操作成功,已${type}登录日志!`,
                    type: 'success',
                })
            }
        })
    }).catch(() => {

    })

}
function f_search() {
    postobj.value.name = search.value;
    getLoginLog();
}
function getLoginLog() {
    $sys.getLoginLog(postobj.value).then(res => {
        if (res.code == 200) {
            logList.value = res.data.result;
        }
    })
}
</script>

<style scoped lang="less">
#statics {
    padding: 20px;
    height: 100%;
    background-color: #f0f2f5;

    .el-table__body-wrapper {
        background-color: '#F0F2F5';
    }

    .title {
        line-height: 80px;
        font-weight: bold;
    }

    .tbcon {
        display: flex;
        justify-content: flex-start;
        border: 1px solid #ddd;
        border-bottom: none;
        width: 60%;

        .conitem {
            line-height: 30px;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .itemlft {
            padding-left: 10px;
        }

        .conleft {
            width: 20%;
            border-right: 1px solid #ddd;
            text-align: center;
        }

        .conright {
            width: 80%;
            text-align: left;
        }
    }
}
</style>
<style lang="less">
#statics {
    .el-table__body-wrapper {
        // background-color: #F0F2F5;
    }
}
</style>